<template>
  <div class="videoMy" id="videoMy">
    <div class="controls">
      <div class="li" @click.stop="clickRecodeVideo">
        <img :src="camera2" />
        <span>Shoot</span>
      </div>
      <div class="li" @click.stop="mergeStart">
        <img :src="merge" />
        <span>Merge</span>
      </div>
      <div class="li" @click.stop="deleteStart">
        <img :src="deletePic" />
        <span>Delete</span>
      </div>
    </div>
    <div class="controlsMore" v-if="multStatus != 0">
      <div class="mergeStyle" v-if="multStatus == 1">
        <div class="li">
          <img :src="top3" alt="" />
          <p>{{ checkboxresult.length }}/{{ myVideos.length }}</p>
        </div>
      </div>
      <div class="btns">
        <p class="cancel" @click.stop="cancelSelect">CANCEL</p>
        <p
          v-if="multStatus == 1"
          :class="checkboxresult.length == mergeSelectSMax ? 'canMerge' : ''"
          @click.stop="mergeConfirmFn(checkboxresult.length == mergeSelectSMax)"
        >
          MERGE
        </p>
        <p
          v-if="multStatus == 2"
          :class="checkboxresult.length > 0 ? 'canDelete' : ''"
          @click.stop="deleteConfirmFn(checkboxresult.length > 0)"
        >
          DELETE
        </p>
      </div>
    </div>
    <van-checkbox-group
      v-model="checkboxresult"
      :max="multStatus == 1 ? 2 : ''"
    >
      <div class="listWrap" :style="listWrapStyleFn">
        <div class="listWrapContent">
          <div @click.stop="jumpDraft" class="li draft">
            <img :src="defaultBgPic" />
            <div class="draftText">
              <img class="icon" :src="draft" />
              <p>Draft</p>
<!--              <span>{{ draftNumber }}Videos</span>-->
              <span>Your Videos</span>
            </div>
          </div>
          <div
            :class="targetId === item.videoId ? 'mergeTarget li' : 'li'"
            v-for="(item, index) in myVideos"
            :key="index"
            @click.stop="videoCheck(multStatus==0,item.videoUrl)"
          >
            <template v-if="multStatus == 1 || multStatus == 2">
              <van-checkbox
                class="checkboxDom"
                :name="item.videoId"
              ></van-checkbox>
            </template>
            <img :src="item.videoIcon" />
            <div class="bottom">
              <img :src="heart2" />
              <span>{{ item.likeCount }}</span>
            </div>
          </div>
        </div>
      </div>
    </van-checkbox-group>

    <div class="videoCheckWrap" v-if="videoCheckIfShow">
      <video
          loop
          controls
          id="videoCheckVideoDom"
          :src="videoCheckUrl"
      ></video>
      <img class="videoCheckClosePic" :src="videoCheckClosePic" @click="videoCheckClose">
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";
import { mapState } from "vuex";
import { remNumber } from "../../../utils/remset";

export default {
  name: "videoMy",
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      }
    },
    currentName: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      defaultBgPic: require("@/assets/imgNews/video/merge.png"), // 草稿箱模块的背景图
      merge: require("@/assets/imgNews/video/merge.png"),
      camera2: require("@/assets/imgNews/video/camera2.png"),
      heart2: require("@/assets/imgNews/video/heart2.png"),
      deletePic: require("@/assets/imgNews/video/delete.png"),
      draft: require("@/assets/imgNews/video/draft.png"),
      top3: require("@/assets/imgNews/video/top3.png"),
      videoCheckClosePic: require("@/assets/imgNews/video/close.png"),

      draftNumber: 0, // 缓存的视频数量
      multStatus: 0, //0默认状态 1是merge状态 2是delete状态
      myVideos: [],
      checkboxresult: [], //选中的视频ID 数据
      targetId: "",
      mergeSelectSMax: 2, //最大的merge数量
      // mergeSelectStatus: true

      videoCheckUrl:'',
      videoCheckIfShow:false,
    };
  },
  watch: {
    checkboxresult(newval, oldval) {
      // console.log(oldval);
      if (newval.length > 0 && this.multStatus == 1) {
        this.targetId = newval[0];
        if (newval.length == this.mergeSelectSMax) {
          // this.mergeConfirmFn();
        }
      } else {
        this.targetId = "";
      }
    },
    currentName(newVal, oldVal) {
      console.log("my" + newVal);
      if (newVal == "my") {
        console.log("my");
        this.getMyVideos();
      }
    }
  },
  computed: mapState({
    // 箭头函数可使代码更简练
    userStoreData: state => state.user,

    objSize() {
      return remNumber(720) * 3.3;
    },
    radius() {
      return 50 - 6 / 2;
    },
    listWrapStyleFn() {
      //0默认状态 1是merge状态 2是delete状态
      let listWrapStyleCss = {};
      if (this.multStatus == 0) {
        listWrapStyleCss = {
          height: "calc(100vh - 1rem - 1.1rem - 44px);",
          top: "calc(1.1rem + 44px)"
        };
      } else if (this.multStatus == 1) {
        listWrapStyleCss = {
          height: "calc(100vh - 1rem - 1.1rem - 44px - 1rem - 0.6rem);",
          top: "calc(1.1rem + 44px +  1rem + 0.6rem)"
        };
      } else if (this.multStatus == 2) {
        listWrapStyleCss = {
          height: "calc(100vh - 1rem - 1.1rem - 44px - 1.1rem);",
          top: "calc(1.1rem + 44px +  1rem)"
        };
      }
      return listWrapStyleCss;
    }
  }),
  mounted() {
    this.getMyVideos();
    window.refreshVideoList = () => {
      this.getMyVideos();
    };
  },
  created() {},
  methods: {
    videoCheckClose(){
      let videoCheckVideoDom = document.querySelector("#videoCheckVideoDom");
      videoCheckVideoDom.pause();
      this.videoCheckIfShow = false;
      this.videoCheckUrl = '';
    },
    // 视频预览
    videoCheck(canCheck,videoUrl){
      if(canCheck){
        this.videoCheckUrl=videoUrl;
        this.videoCheckIfShow = true;
      }
    },
    getMyVideos() {
      this.$toast.loading({
        duration: 0,
        forbidClick: true
      });
      let zs = this;
      this.api.videoController
        .videoRecommendList({
          currPage: 1,
          pageSize: 50,
          isMy: 1,
          userId: zs.userStoreData.userId
        })
        .then(res => {
          zs.$toast.clear();
          if (res.data.code === 200) {
            zs.myVideos = res.data.data.list;
          } else {
            zs.$toast(res.data.info);
          }
        });
    },
    DeleteAjax() {
      let zs = this;
      this.$toast.loading({
        duration: 0,
        forbidClick: true
      });
      this.api.videoController
        .videoDel({
          ids: zs.checkboxresult.join(),
          userId: zs.userStoreData.userId
        })
        .then(res => {
          zs.$toast.clear();
          zs.$toast("Delete Success");
          if (res.data.code === 200) {
            this.cancelSelect();
            zs.getMyVideos();
          } else {
            zs.$toast(res.data.info);
          }
        });
      setTimeout(() => {}, 1500);
    },
    deleteConfirmFn(canDelete) {
      if (!canDelete) return;
      let zs = this;
      Dialog.confirm({
        title: "Tips",
        message: "Sure to delete ?",
        confirmButtonText:'Yes',
        cancelButtonText:'No'
      })
        .then(() => {
          zs.DeleteAjax();
        })
        .catch(() => {
          // on cancel
        });
    },
    mergeAjax(from, to) {
      let zs = this;
      zs.$toast.loading({
        duration: 0,
        forbidClick: true
      });
      this.api.videoController
        .videoMerge({
          formId: from,
          toId: to,
          userId: zs.userStoreData.userId
        })
        .then(res => {
          zs.$toast.clear();
          if (res.data.code === 200) {
            this.$toast({
              message: "Merge Success"
            });
            this.cancelSelect();
            zs.$toast.clear();
            zs.getMyVideos();
          } else {
            this.cancelSelect();
            zs.$toast.clear();
            this.$toast({
              message: res.data.info
            });
          }
        });
    },
    mergeConfirmFn(canMerge) {
      if (!canMerge) return;
      let zs = this;

      let formIdArr = zs.checkboxresult.filter((item, index) => {
        return item != zs.targetId;
      });
      this.api.videoController
        .videomergePreview({
          formId: formIdArr[0],
          toId: zs.targetId,
          userId: zs.userStoreData.userId
        })
        .then(res => {
          zs.$toast.clear();
          if (res.data.code === 200) {
            let zs = this;
            Dialog.confirm({
              title: "Tips",
              message:"Sure To Merge?",
              confirmButtonText:'Yes',
              cancelButtonText:'No'
            })
              .then(() => {
                zs.mergeAjax(formIdArr[0], zs.targetId);
              })
              .catch(() => {
                this.cancelSelect();
                zs.$toast.clear();
              });
          } else {
            zs.$toast(res.data.info);
          }
        });
    },
    cancelSelect() {
      this.multStatus = 0;
      this.checkboxresult = []; //选中的视频ID 数据
      this.targetId = "";
    },
    mergeStart() {
      let zs = this;
      if (zs.myVideos.length == 0) return;
      if (this.multStatus == 2) {
        Dialog.confirm({
          title: "Tips",
          message: "Cancle Dlelete？",
          confirmButtonText:'Yes',
          cancelButtonText:'No'
        })
          .then(() => {
            zs.cancelSelect();
            zs.multStatus = 1;
          })
          .catch(() => {
            // on cancel
          });
      } else {
        zs.multStatus = 1;
      }
    },
    deleteStart() {
      let zs = this;
      if (zs.myVideos.length == 0) return;
      if (this.multStatus == 1) {
        Dialog.confirm({
          title: "Tips",
          message: "Cancle Merge？",
          confirmButtonText:'Yes',
          cancelButtonText:'No'
        })
          .then(() => {
            zs.cancelSelect();
            this.multStatus = 2;
          })
          .catch(() => {
            // on cancel
          });
      } else {
        zs.multStatus = 2;
      }
    },
    // 打开手机缓存
    jumpDraft() {
      // alert('jumpDraft')
      if (window.StepSDK) {
        window.StepSDK.jumpDraft(this.userStoreData.userId+','+this.userStoreData.token);
      }
    },
    // 打开相机录像
    clickRecodeVideo() {
      if (window.StepSDK) {
        window.StepSDK.recordVideo(this.userStoreData.userId+','+this.userStoreData.token);
      }
    }
  },
  beforeDestroy() {
    this.videoCheckClose();
  }
};
</script>

<style scoped lang="less">
.clearfix {
  zoom: 1;
}
.clearfix:after {
  content: "";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}
.circle_container {
  width: 100%;
  height: 100%;
  position: relative;
}
#videoMy.videoMy {
  height: calc(100vh - 1rem);
  .controls {
    height: 1.1rem;
    padding: 0.4rem 0.45rem 0.3rem;
    box-sizing: border-box;
    background-color: rgba(36, 33, 56, 1);
    color: #fff;
    display: flex;
    justify-content: space-between;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: 44px;
    width: 7.2rem;
    z-index: 1;
    .li {
      cursor: pointer;
      height: 0.4rem;
      line-height: 0.4rem;
      display: flex;
      justify-content: center;
      img {
        height: 0.4rem;
        width: auto;
      }
      span {
        display: block;
        padding-left: 0.2rem;
        font-size: 0.28rem;

        font-weight: bold;
        line-height: 0.4rem;
        color: #ffffff;
        opacity: 1;
      }
    }
  }

  .listWrap {
    height: calc(100vh - 1rem - 1.1rem - 44px);
    width: 7.2rem;
    position: fixed;
    left: 50%;
    top: calc(1.1rem + 44px);
    transform: translateX(-50%);
    overflow: hidden;
    align-content: flex-start;
    .listWrapContent {
      display: flex;
      justify-content: flex-start;
      align-content: flex-start;
      flex-wrap: wrap;

      //width: 7.2rem;
      width: calc(100% + 30px);
      height: 100%;
      padding-right: 30px;
      overflow-x: hidden;
      overflow-y: scroll;
    }
    .li {
      &.mergeTarget {
        border-color: red;
      }
      width: 2.4rem;
      height: 3.2rem;
      position: relative;
      cursor: pointer;
      border: 1px solid #fff;
      border-top: none;
      box-sizing: border-box;
      & > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -1;
        background-color: rgba(37, 42, 43, 0.18);
      }
      &.draft {
        .draftText {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.8);
          z-index: 0;
          p,
          span {
            font-size: 0.28rem;

            font-weight: bold;
            line-height: 0.4rem;
            color: #ffffff;
            opacity: 1;
            display: block;
            text-align: center;
          }
          .icon {
            display: block;
            margin: 0 auto;
            width: 0.5rem;
            height: 0.5rem;
            padding: 0.95rem 0 0.05rem;
          }
        }
      }
      & > .bottom {
        position: absolute;
        left: 0.2rem;
        bottom: 0.1rem;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        img {
          width: 0.32rem;
          height: 0.3rem;
          object-fit: contain;
        }
        span {
          padding-left: 0.1rem;
          display: block;
          height: 0.3rem;
          font-size: 0.2rem;

          font-weight: bold;
          line-height: 0.3rem;
          color: #ffffff;
          text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.6);
          opacity: 1;
        }
      }

      .checkboxDom {
        position: absolute;
        right: 0.2rem;
        top: 0.2rem;
      }
    }
  }

  .controlsMore {
    position: fixed;
    left: 50%;
    top: calc(44px + 1.1rem);
    transform: translateX(-50%);
    .mergeStyle {
      height: 0.6rem;
      width: 7.2rem;
      background-color: #fff;
      display: flex;
      justify-content: center;
      .li {
        display: flex;
        justify-content: center;
        padding: 0.1rem 0;
        img {
          width: 0.4rem;
          height: 0.4rem;
          padding-right: 0.2rem;
        }
        p {
          height: 0.4rem;
          line-height: 0.4rem;
          font-size: 0.28rem;

          font-weight: bold;
          color: #000000;
          opacity: 1;
        }
      }
    }
    .btns {
      height: 1rem;
      line-height: 1rem;
      width: 7.2rem;
      display: flex;
      p {
        width: 50%;
        cursor: pointer;
        line-height: 1rem;
        font-size: 0.28rem;

        font-weight: bold;
        color: rgba(255, 255, 255, 1);
        background-color: rgba(255, 64, 123, 0.2);
        opacity: 1;
        text-align: center;
        &.cancel {
          color: #333;
          background-color: rgba(240, 240, 240, 1);
        }
        &.canMerge,
        &.canDelete {
          background-color: rgba(255, 64, 123, 1);
        }
      }
    }
  }
  .videoCheckWrap{
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    box-sizing: border-box;
    padding: 0.5rem 0.2rem 2rem;
    z-index: 1002;
    video{
      width: 100%;
      height: 100%;
    }
    .videoCheckClosePic{
      position: fixed;
      left: 50%;
      bottom:0.25rem;
      width: 1.5rem;
      height: 1.5rem;
      cursor: pointer;
      transform: translateX(-50%);
    }
  }
}
</style>
<style lang="less">
//.videoMy {
.van-checkbox__icon .van-icon {
  color: rgba(255, 255, 255, 0.62);
  border-color: #fff;
}
.van-dialog__header {
  color: #000;
}
//}
</style>
